<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>居家养老服务预约确认</title>
    <script src="https://cdn.tailwindcss.com/3.3.3"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
    <style>
        body {
            font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
            background-color: #f8f9fa;
            color: #333;
        }
        .container {
            max-width: 750px;
            margin: 0 auto;
            background-color: #fff;
        }
        .step-indicator {
            position: relative;
            height: 60px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 20px;
            background-color: #fff;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        }
        .step {
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;
            z-index: 1;
        }
        .step-number {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background-color: #e9ecef;
            color: #6c757d;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 12px;
            font-weight: bold;
        }
        .step.active .step-number {
            background-color: #4e73df;
            color: #fff;
        }
        .step-title {
            font-size: 12px;
            color: #6c757d;
            margin-top: 5px;
        }
        .step.active .step-title {
            color: #4e73df;
            font-weight: bold;
        }
        .nav-tab.active {
            color: #2563eb;
            position: relative;
        }
        .nav-tab.active::after {
            content: '';
            position: absolute;
            bottom: -8px;
            left: 50%;
            transform: translateX(-50%);
            width: 24px;
            height: 3px;
            background-color: #2563eb;
            border-radius: 3px;
        }
        .step-line {
            position: absolute;
            top: 12px;
            left: 20%;
            right: 20%;
            height: 2px;
            background-color: #e9ecef;
            z-index: 0;
        }
        .step-line-progress {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 66.66%;
            background-color: #4e73df;
        }
        .section-title {
            font-size: 16px;
            font-weight: bold;
            color: #333;
            padding: 15px 20px;
            border-bottom: 1px solid #eee;
            display: flex;
            align-items: center;
        }
        .section-title i {
            margin-right: 8px;
            color: #4e73df;
        }
        .info-item {
            padding: 15px 20px;
            border-bottom: 1px solid #eee;
            display: flex;
        }
        .info-label {
            width: 80px;
            color: #6c757d;
            font-size: 14px;
        }
        .info-content {
            flex: 1;
            color: #333;
            font-size: 14px;
        }
        .price-item {
            padding: 15px 20px;
            display: flex;
            justify-content: space-between;
            border-bottom: 1px solid #eee;
        }
        .price-label {
            color: #6c757d;
            font-size: 14px;
        }
        .price-value {
            color: #333;
            font-size: 14px;
        }
        .total-price {
            font-weight: bold;
            color: #e74a3b;
        }
        .payment-method {
            padding: 15px 20px;
            display: flex;
            flex-direction: column;
        }
        .payment-option {
            display: flex;
            align-items: center;
            padding: 10px 0;
            border-bottom: 1px solid #eee;
        }
        .payment-option:last-child {
            border-bottom: none;
        }
        .payment-icon {
            width: 24px;
            height: 24px;
            margin-right: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .payment-name {
            flex: 1;
            font-size: 14px;
            color: #333;
        }
        .radio-btn {
            width: 20px;
            height: 20px;
            border: 1px solid #ddd;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .radio-btn.selected {
            border-color: #4e73df;
            background-color: #4e73df;
        }
        .radio-btn.selected:after {
            content: '';
            width: 10px;
            height: 10px;
            background-color: #fff;
            border-radius: 50%;
        }
        .agreement {
            padding: 15px 20px;
            display: flex;
            flex-direction: column;
        }
        .agreement-item {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
        }
        .checkbox {
            width: 18px;
            height: 18px;
            border: 1px solid #ddd;
            border-radius: 3px;
            margin-right: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .checkbox.checked {
            border-color: #4e73df;
            background-color: #4e73df;
        }
        .checkbox.checked:after {
            content: '\f00c';
            font-family: 'Font Awesome 6 Free';
            font-weight: 900;
            color: #fff;
            font-size: 12px;
        }
        .agreement-text {
            font-size: 12px;
            color: #6c757d;
        }
        .agreement-text a {
            color: #4e73df;
            text-decoration: none;
        }
        .btn-group {
            padding: 20px;
            display: flex;
            justify-content: space-between;
        }
        .btn {
            height: 44px;
            border-radius: 22px;
            font-size: 16px;
            font-weight: bold;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }
        .btn-prev {
            width: 120px;
            border: 1px solid #4e73df;
            color: #4e73df;
            background-color: #fff;
        }
        .btn-submit {
            flex: 1;
            margin-left: 15px;
            background-color: #e74a3b;
            color: #fff;
            border: none;
        }
        .footer-tip {
            padding: 15px 20px;
            font-size: 12px;
            color: #6c757d;
            text-align: center;
            background-color: #f8f9fa;
        }
    </style>
</head>
<body>
    <!-- 顶部导航 -->
    <header class="bg-white py-4 px-6 shadow-sm">
        <div class="flex items-center relative">
            <a href="elderly-appointment.html" class="text-gray-600 absolute left-0 z-10">
                <i class="fas fa-chevron-left text-lg"></i>
            </a>
            <h1 class="text-xl font-semibold text-center flex-1">预约确认</h1>
        </div>
    </header>

    <div class="container">
        <!-- 步骤导航 -->
        <div class="step-indicator">
            <div class="step-line">
                <div class="step-line-progress"></div>
            </div>
            <div class="step">
                <div class="step-number">1</div>
                <div class="step-title">选择时间</div>
            </div>
            <div class="step">
                <div class="step-number">2</div>
                <div class="step-title">填写信息</div>
            </div>
            <div class="step active">
                <div class="step-number">3</div>
                <div class="step-title">确认预约</div>
            </div>
        </div>

        <!-- 信息核对区 -->
        <div class="section">
            <div class="section-title">
                <i class="fas fa-check-circle"></i>服务信息核对
            </div>
            <div class="info-item">
                <div class="info-label">服务项目</div>
                <div class="info-content">居家养老护理（8小时）</div>
            </div>
            <div class="info-item">
                <div class="info-label">服务时间</div>
                <div class="info-content">2024年6月15日 09:00-17:00</div>
            </div>
            <div class="info-item">
                <div class="info-label">服务人员</div>
                <div class="info-content">张阿姨（5年经验）</div>
            </div>
        </div>

        <div class="section">
            <div class="section-title">
                <i class="fas fa-map-marker-alt"></i>地址信息
            </div>
            <div class="info-item">
                <div class="info-label">服务地址</div>
                <div class="info-content">北京市朝阳区建国路88号SOHO现代城A座1203室</div>
            </div>
            <div class="info-item">
                <div class="info-label">联系人</div>
                <div class="info-content">李先生</div>
            </div>
            <div class="info-item">
                <div class="info-label">联系电话</div>
                <div class="info-content">138****1234</div>
            </div>
        </div>

        <div class="section">
            <div class="section-title">
                <i class="fas fa-comment-alt"></i>需求备注
            </div>
            <div class="info-item">
                <div class="info-content">老人有轻度高血压，需要特别注意饮食和用药时间</div>
            </div>
        </div>

        <!-- 价格明细区 -->
        <div class="section">
            <div class="section-title">
                <i class="fas fa-receipt"></i>价格明细
            </div>
            <div class="price-item">
                <div class="price-label">服务费用</div>
                <div class="price-value">¥300.00</div>
            </div>
            <div class="price-item">
                <div class="price-label">优惠折扣</div>
                <div class="price-value">-¥30.00</div>
            </div>
            <div class="price-item">
                <div class="price-label">积分抵扣</div>
                <div class="price-value">-¥20.00</div>
            </div>
            <div class="price-item">
                <div class="price-label">应付金额</div>
                <div class="price-value total-price">¥250.00</div>
            </div>
        </div>

        <!-- 支付方式选择 -->
        <div class="section">
            <div class="section-title">
                <i class="fas fa-credit-card"></i>支付方式
            </div>
            <div class="payment-method">
                <div class="payment-option">
                    <div class="payment-icon">
                        <i class="fab fa-weixin" style="color: #09bb07;"></i>
                    </div>
                    <div class="payment-name">微信支付</div>
                    <div class="radio-btn selected"></div>
                </div>
                <div class="payment-option">
                    <div class="payment-icon">
                        <i class="fab fa-alipay" style="color: #108ee9;"></i>
                    </div>
                    <div class="payment-name">支付宝</div>
                    <div class="radio-btn"></div>
                </div>
                <div class="payment-option">
                    <div class="payment-icon">
                        <i class="fas fa-coins" style="color: #ffc107;"></i>
                    </div>
                    <div class="payment-name">积分支付</div>
                    <div class="radio-btn"></div>
                </div>
            </div>
        </div>

        <!-- 条款同意区 -->
        <div class="section">
            <div class="agreement">
                <div class="agreement-item">
                    <div class="checkbox checked"></div>
                    <div class="agreement-text">我已阅读并同意<a href="#">《居家养老服务协议》</a></div>
                </div>
                <div class="agreement-item">
                    <div class="checkbox checked"></div>
                    <div class="agreement-text">我已阅读并同意<a href="#">《个人信息保护政策》</a></div>
                </div>
            </div>
        </div>

        <!-- 操作按钮区 -->
        <div class="btn-group">
            <div class="btn btn-prev">上一步</div>
            <div class="btn btn-submit">提交预约</div>
        </div>

        <!-- 底部提示 -->
        <div class="footer-tip">
            提交预约后，客服将在30分钟内与您确认服务详情
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 支付方式选择
            const paymentOptions = document.querySelectorAll('.payment-option');
            paymentOptions.forEach(option => {
                option.addEventListener('click', function() {
                    document.querySelectorAll('.radio-btn').forEach(btn => {
                        btn.classList.remove('selected');
                    });
                    this.querySelector('.radio-btn').classList.add('selected');
                });
            });

            // 协议勾选
            const agreementItems = document.querySelectorAll('.agreement-item');
            agreementItems.forEach(item => {
                item.addEventListener('click', function() {
                    const checkbox = this.querySelector('.checkbox');
                    checkbox.classList.toggle('checked');
                });
            });

            // 上一步按钮
            document.querySelector('.btn-prev').addEventListener('click', function() {
                alert('返回上一步');
            });

            // 提交按钮
            document.querySelector('.btn-submit').addEventListener('click', function() {
                const checkedAgreements = document.querySelectorAll('.checkbox.checked').length;
                if (checkedAgreements < 2) {
                    alert('请先同意所有协议条款');
                    return;
                }
                // alert('预约提交成功！');
                window.location.href = 'elderly-appointment-status.html';
            });
        });
    </script>
</body>
</html>